<template>
  <view class="box">
    <!-- <uni-nav-bar
      left-icon="back"
      title="姓名姻缘"
      fixed="true"
      status-bar="true"
      @clickLeft="goback"
    ></uni-nav-bar> -->
    <view class="body">
      <view class="form">
        <text>男：</text>
        <view class="input">
          <input type="text" @input="changemale" />
        </view>
      </view>
      <view class="form">
        <text>女：</text>
        <view class="input">
          <input type="text" @input="changefemale" />
        </view>
      </view>
      <button @tap="ok">确定</button>
    </view>
  </view>
</template>
<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
export default {
  components: { uniNavBar },
  data() {
    return {
      list: ["male", "female"],
      male: "",
      female: "",
    };
  },
  methods: {
    ok() {
      let flag = true;
      let rules = {
        reg: /^[\u4e00-\u9fa5]+$/,
        err: "请输入正确的姓名",
      };
      this.list.forEach((item) => {
        if (!rules.reg.test(this[item])) {
          flag = false;
          uni.showToast({ title: rules.err, icon: "none" });
        }
      });
      if (flag) {
        uni.redirectTo({
          url: `./detail?male=${this.male}&female=${this.female}`,
        });
      }
    },
    changemale(e) {
      this.male = e.target.value;
    },
    changefemale(e) {
      this.female = e.target.value;
    },
    goback() {
      uni.switchTab({
        url: `../index`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}
.body {
  width: 90%;
  height: 100%;
  margin-left: 5%;
  .form {
    width: 100%;
    height: 100upx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text {
      width: 10%;
      height: 100upx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .input {
      width: 100%;
      height: 80%;
      border: 1px solid #ccc;
      input {
        width: 90%;
        height: 100%;
        padding-left: 20upx;
      }
    }
  }
}
</style>